<template>
  <div class="goodsdetail">
    <!-- 头部标题 -->
    <div class="header">
      <van-nav-bar
        title="商品详情页"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
        fixed
        placeholder
      />
    </div>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 中间内容区域 -->

    <Content :obj="obj" />

    <!-- footer区域 -->
    <div class="footer">
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" dot @click="goTalk" />
        <van-goods-action-icon
          icon="cart-o"
          @click="goCart"
          text="购物车"
          :badge="number"
        />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          color="#be99ff"
          @click="addCart(loginStatus, obj, images[0])"
        />
        <!-- <van-goods-action-button
          type="danger"
          color="#7232dd"
          text="立即购买"
        /> -->
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex"
import Content from "@/components/detail/Content"
import { Toast } from "vant"

export default {
  created() {
    this.item_id = this.$route.query.id
    this.selectShopDetail()
    this.userInit()
    // 查询购物车数据

    // 筛选图片
    // this.images.push(this.obj.shopImgUrl)
  },

  components: {
    Content,
  },

  data() {
    return {
      item_id: "",
      item_list: "",
      images: [],
      number: "",
      obj: {},
    }
  },

  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },

    goTalk() {
      this.$router.push("/gotalk")
    },
    // 商品数据详情查询
    selectShopDetail() {
      let param = { id: this.item_id }
      this.$api.list.shopDetails(param).then((res) => {
        console.log(res)
        const { information, imgs } = res.data
        console.log(imgs)
        this.obj = information
        let imagesArr = []
        imgs.map((item) => {
          imagesArr.push(item.pic_src)
        })
        console.log(imagesArr)
        this.images = imagesArr
        // 处理商品的图片
        // let arr = res.data.map((item) => {
        //   return item["pic_src"]
        // })
        // this.images = arr
        // this.obj.title = res.data[0]["home_title"]
        // this.obj.des = res.data[0]["home_des"]
        // this.obj.price = res.data[0]["home_price"]
        // this.obj.good_id = res.data[0]["home_id"]
        // this.number = res.num
      })
    },

    // 去购物车
    goCart() {
      this.$router.push("/cart")
    },

    // 添加到购物车
    addCart(loginStatus, obj, pic) {
      console.log(loginStatus, obj, pic)
      let pic1 = { picture: pic }
      console.log(pic1)
      Object.assign(obj, pic1)
      // 路由传参
      loginStatus ? this.addCartSuccess(obj) : this.addCartFalse()
    },

    // 未登录的处理
    addCartFalse() {
      this.$router.push("/login")
    },

    // 登录状态的处理
    addCartSuccess(obj) {
      // 将该商品的数据传到cart中
      // this.$router.push({
      //   path: "/cart",
      //   query: {
      //     obj,
      //   },
      // })
      this.saveShopMessage(obj)
    },

    // 将商品详情页传过来的数据保存到数据库中
    saveShopMessage(obj) {
      this.$api.cart.insertShopMessage(obj).then((res) => {
        // 将返回的数据保存到vuex中即可，再渲染
        console.log(res)
        this.number = res.number
      })
      Toast.success("添加到购物车")
    },

    // 商品详情页的购物车数量查询
    selectShopLength() {},

    ...mapMutations(["loginOut", "userInit"]),
  },

  computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
      userInfo: (state) => state.user.userInfo,
      list: (state) => state.cart.list,
    }),
  },
}
</script>

<style lang="less" scoped>
.goodsdetail {
  width: 100vw;
  height: 100vh;
  background-color: rgb(240, 240, 240);
}

img {
  width: 100%;
  height: 18.75rem /* 300/16 */;
  object-fit: cover;
}
</style>
